<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>userList</title>
</head>
<body>

	<p>查询条件</p>
	<form class="layui-form" id="queryUserListForm"
		action="${pageContext.request.contextPath}/getUserList" method="post">
		<input type="text" class="layui-input" name="userName"
			id="queryUserName" placeholder="用户名模糊查询" value="${userReq.userName}" />
		<div class="layui-btn layui-btn-small" onclick="getUserList()">查询</div>
	</form>
	<p>操作</p>
	<div class="layui-btn layui-btn-small" onclick="toAddUserPage()">添加</div>
	<div class="layui-btn layui-btn-small" onclick="showDetailDiv()">详情</div>
	<div class="layui-btn layui-btn-small" onclick="getUserList()">修改</div>
	<div class="layui-btn layui-btn-small" onclick="getUserList()">删除</div>
	<p>查询结果</p>
	<table class="layui-table" style="width: 80%;">
		<thead>
			<tr>
				<td width="8%"><input type='checkbox' name='selectAll'
					id='selectAll' value="checkbox" onclick="selectAll(this);" />全选</td>
				<th>用户编号</th>
				<th>用户登录名</th>
				<th>昵称</th>
				<th>类型</th>
				<th>是否禁用</th>
				<th>创建时间</th>
				<th>最后登录时间</th>
			</tr>
		</thead>
		<c:forEach items="${userList}" var="row">
			<tr>
				<td><input type='checkbox' name='checkbox' id='checkbox'
					value="${row.data['USER_NO']}" onclick="checkOne(this);" /></td>
				<td>${row.data['USER_NO']}</td>
				<td>${row.data['USER_NAME']}</td>
				<td>${row.data['USER_NICK']}</td>
				<td>${row.data['USER_TYPE']}</td>
				<td>${row.data['IS_FORBID']}</td>
				<td>${row.data['CREAT_TIME']}</td>
				<td>${row.data['LAST_LOGIN_TIME']}</td>
			</tr>
		</c:forEach>
	</table>

	<!-- 详情Div（隐藏） -->
	<div style="display: none;" id="detailDivHide">
		<div
			style="position: relative; top: 30%; transform: translateY(-50%);">
			<form class="layui-form" action="">
				<table style="margin: 0 auto;">
					<tr>
						<td>用户名</td>
						<td><input type="text" class="layui-input" name="username"
							id="username" /></td>
					</tr>
					<tr>
						<td>密码</td>
						<td><input type="password" class="layui-input"
							name="password" id="password" /></td>
					</tr>
					<tr>
						<td></td>
						<td><div class="layui-btn layui-btn-small"
								onclick="register()">注册</div></td>
					</tr>
				</table>
			</form>
		</div>
	</div>

	<!-- 编辑Div（隐藏） -->
	<div style="display: none;" id="editDivHide">
		<div
			style="position: relative; top: 30%; transform: translateY(-50%);">
			<form class="layui-form" action="">
				<table style="margin: 0 auto;">
					<tr>
						<td>用户名</td>
						<td><input type="text" class="layui-input" name="username"
							id="username" /></td>
					</tr>
					<tr>
						<td>密码</td>
						<td><input type="password" class="layui-input"
							name="password" id="password" /></td>
					</tr>
					<tr>
						<td></td>
						<td><div class="layui-btn layui-btn-small"
								onclick="register()">保存</div></td>
					</tr>
				</table>
			</form>
		</div>
	</div>

</body>
<script>
	layui.use('table', function() {
		var table = layui.table;

		var _tools = {
			refresh : function() {
				getUserList();
			}
		}

		window.tools = _tools;
	});

	//提交form表单，查询用户列表，带回显，分页功能待添加
	function getUserList() {
		pageSubmit("queryUserListForm");
	}

	//打开添加用户弹出层
	function toAddUserPage() {
		//iframe层
		var url = '${pageContext.request.contextPath}/toAddUserPage';
		layer.open({
			type : 2,
			title : '添加用户',
			maxmin : false,
			shadeClose : true,
			shade : 0.8,
			offset : '100px',
			area : [ '600px', '400px' ],
			content : url
		});
	}

	var detailDivID = "";
	//显示详情信息弹出层（隐藏Div）
	function showDetailDiv() {

		var html = $("#detailDivHide").html();
		detailDivID = layer
				.open({
					type : 1,
					title : [ '用户详情', 'font-size:18px;' ],
					offset : '0px',//只定义top坐标，水平保持居中
					skin : 'layui-layer-rim', //加上边框
					area : [ '500px', '300px' ],
					id : 'DetailDiv',//设定一个id，防止重复弹出
					shadeClose : true,
					content : html,
					success : function(layero) {
						// 样式不好控制，只能弹出层加载完成后在控制
						$("#DetailDiv").find('table').css('margin', '0 auto');
						$("#DetailDiv").find('table').find('td').css('padding',
								'3px');
						//alert($('input:checkbox[name=checkbox]:checked').val());
						var userNo = $('input:checkbox[name=checkbox]:checked')
								.val() * 1;
						//alert(userNo);
						//ajax提交，并获取数据
						$
								.ajax({
									url : "${pageContext.request.contextPath}/getUserById",
									type : 'POST',
									data : {
										userNo : userNo
									},// 
									async : false,
								   /*  contentType : "application/json",  */
									processData : true,
									dataType : 'text',
									success : function(data) {
										//渲染
										alert(data);
									},
									error : function(data) {
										layer.alert('添加出现异常，请稍后再试！'
												+ JSON.stringify(data), {
											closeBtn : 0,
											anim : 6,
											icon : 5
										});
									}
								});
					}
				});

	}
</script>
</html>